<template>
  <el-row>
    <el-col>
      <el-input v-model="Serch" placeholder="请输入学号" style="width: 20%" />
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="primary" @click="addstudentdialog = true"
        >添加学生资料</el-button
      >
    </el-col>
  </el-row>

  <el-table :data="StudentTable" border stripe style="width: 100%">
    <el-tableColumn label="学号" prop="student_id"></el-tableColumn>
    <el-tableColumn label="姓名" prop="student_name"></el-tableColumn>
    <el-tableColumn label="学院" prop="college"></el-tableColumn>
    <el-tableColumn label="专业" prop="specialize"></el-tableColumn>
    <el-tableColumn label="班级" prop="student_class"></el-tableColumn>
    <el-tableColumn label="操作" prop="operation">
      <template #default="{ row }">
        <el-button
          type="primary"
          size="mini"
          @click="onEditStudentDialogOpen(row)"
          >编辑
        </el-button>
        <el-button type="danger" size="mini" @click="deleteStudent(row.id)"
          >删除
        </el-button>
      </template>
    </el-tableColumn>
  </el-table>

  <el-dialog
    title="添加学生资料"
    v-model="addstudentdialog"
    width="50%"
    draggable
  >
    <el-form label-width="70px">
      <el-form-item label="学号">
        <el-input v-model="add.studentID" placeholder="请输入学号"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="add.studentName" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="学院">
        <el-input v-model="add.college" placeholder="请输入学院"></el-input>
      </el-form-item>

      <el-form-item label="专业">
        <el-input v-model="add.specialize" placeholder="请输入专业"></el-input>
      </el-form-item>

      <el-form-item label="班级">
        <el-input
          v-model="add.studentClass"
          placeholder="请输入班级"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onCloseAddStudentDialog">取 消</el-button>
      <el-button @click="addStudent" type="primary">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
    title="修改学生资料"
    v-model="editstudentdialog"
    width="50%"
    draggable
  >
    <el-form label-width="70px">
      <el-form-item label="学号">
        <el-input v-model="edit.studentID" placeholder="请输入学号"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input
          v-model="edit.studentName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>

      <el-form-item label="学院">
        <el-input v-model="edit.college" placeholder="请输入学院"></el-input>
      </el-form-item>

      <el-form-item label="专业">
        <el-input v-model="edit.specialize" placeholder="请输入专业"></el-input>
      </el-form-item>

      <el-form-item label="班级">
        <el-input
          v-model="edit.studentClass"
          placeholder="请输入班级"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editstudentdialog = false">取 消</el-button>
      <el-button type="primary" @click="editStudent">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from "../helper/request.js";

const addDefault = () => ({
  studentID: "",
  studentName: "",
  college: "",
  specialize: "",
  studentClass: "",
});

export default {
  data() {
    return {
      Serch: "",
      StudentTable: [],
      addstudentdialog: false,
      add: addDefault(),
      editstudentdialog: false,
      edit: {
        studentID: "",
        studentName: "",
        college: "",
        specialize: "",
        studentClass: "",
      },
      deletestudentdialog: false,
      deletes: {
        studentID: "",
      },
    };
  },
  methods: {
    /**
     * 获取学生信息
     */
    getStudent() {
      request.get("/GetStudent?offset=0").then((res) => {
        if (res?.code && res.code === 200) {
          this.StudentTable = res.msg ?? [];
        }
      });
    },
    addStudent() {
      const data = { ...this.add };
      request.post("/ResgiterStudent", data).then((res) => {
        if (res.code && res.code === 200) {
          this.$message.success("添加成功");
        } else {
          this.$message.error("添加失败");
        }
        this.getStudent();
        this.onCloseAddStudentDialog();
      });
    },
    editStudent() {
      const data = { ...this.edit };
      request.put("/UpdateStudent", data).then((res) => {
        if (res.code && res.code === 200) {
          this.$message.success("更改成功");
          this.getStudent();
        } else {
          this.$message.error("更改失败");
        }
        this.editstudentdialog = false;
        this.getStudent();
      });
    },
    deleteStudent(index) {
      request
        .delete("/DeleteStudent", {
          data: {
            id: index,
          },
        })
        .then((res) => {
          if (res.code && res.code === 200) {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
          this.getStudent();
        });
    },
    handleSearch() {
      if (this.Serch === "" || !this.Serch) {
        this.getStudent();
        return;
      }
      request.get(`/GetStudent?student_id=${this.Serch}`).then((res) => {
        if (res?.code && res.code === 200) {
          this.$message.success("查询成功");
          this.StudentTable = res.msg ?? [];
        }
      });
    },
    onEditStudentDialogOpen(data) {
      this.editstudentdialog = true;
      this.edit = {
        ...data,
        studentID: data.student_id,
        studentName: data.student_name,
        studentClass: data.student_class,
      };
    },
    onCloseAddStudentDialog() {
      this.addstudentdialog = false;
    },
  },
  mounted() {
    this.getStudent();
  },
  watch: {
    addstudentdialog() {
      this.add = addDefault();
    },
  },
};
</script>